<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本路由的使用</title>
</head>
<body>

<div id="app">
    <div>
        <h1>
            头部
        </h1>
    </div>
    <div>
        <p>
        <ul>
            <!-- 方式一：传统方式 -->
            <li><a href="#/foo">Go foo</a></li>
            <li><a href="#/bar"> Go ro Bar</a></li>
            <!-- 方式二：采用官网的方式，使用router-like, 通过传入 to  属性，属性指定跳转链接，不用像传统方式 加 # 号 -->
            <li>
                <!-- router-like  ,使用 router-link  默认渲染后生成的 a 标签，但是使用router-link 上使用 tag ，表示会根据tag指定的标签进行渲染 -->
                <!-- 其中 tag 表示，默认生成的标签就是 li标签 ，  router-link 标签默认生成的样式就是router-link-active，默认选中的状态 -->
                <router-link to="/foo" tag="li">Go to foo</router-link>
            </li>
            <li>
                <router-link to="/bar"> Go to bar</router-link>
            </li>

        </ul>
        </p>
    </div>
    <div>
        <!-- 路由的出口，路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

</div>


<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>
    // 1：定义组件
    var FOO = {
        template: '<div> foo  组件 </div>'
    };

    var BAR = {
        template: '<div> bar  组件 </div>'
    };
    //
    // // 2：定义路由，匹配路由表，当点击特定的url时，显示对应的组件
    const vueRouter = new VueRouter({
        routes: [
            {path: '/foo', component: FOO},
            {path: '/bar', component: BAR}
        ]
    });


    // 3: 注入路由到实例中
    new Vue({
        el: "#app",
        router: vueRouter

    });
</script>
</body>
</html>
